<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>传智学员信息登记表</title>
</head>
<body>
    <div class="bg">
        <form action="#" method="get" autocomplete="off">
        <h2>传智学员信息登记表</h2>
        <p><span>用户登录名:</span><input type="text" name="user_name" value="myemail @163.com" disabled readonly/>(不能修改，只能查看)</p>
        <p><span>真实姓名:</span><input type="text" name="raal_name" pattern="[^u4e00-\ u9fa5]{0,}$" placeholder="例如: 王明" required autofocus/>(必须填写只能输入汉子)</p>
        <p><span>真实年龄:</span><input type="number" name="raal_lage" value="24" min="15" max="120" required/>(必须填写)</p>
        <p><span>出生日期:</span><input type="date" name="birthday" value="1999-10-1" required/>(必须填写)</p>
        <p><span>电子邮箱:</span><input type="email" name="myemail" placeholder="123456@126.com" required multiple/>(必须填写)</p> 
        <p><span>身份证号:</span><input type="text" name="card" required pattern="^\d{8,18}|[0-9x] {8,18}|[0-9x] {8,18}?$"/>(必须填写，能够以数字，字母X结尾的短身份证号码)</p>
        <p><span>手机号码:</span><input type="tel" name="telphone" pattern="^\d {11}$" required/>(必须填写)</p>
        <p><span>个人主页:</span><input type="url" name="myurl" list="urllist" placeholder="http://www.itcast.cn" pattern="^http://({\w-}+\.)+{/w-}+(/{\w-./?%&=}*)?&"/>(请选择网址)</p>
        <datalist id="urllist">
        <option>http://www.itcast.cn</option>
        <option>http://www.boxuegu.com</option>
        <option>http://www.w3school.com</option>
        </datalist>
    </p>
    <p class="lucky"><span>幸运颜色:</span><input type="color" name="lovecolor" value="#fed000"/>(请选择你喜欢的颜色)</p>
    <p class="btn">
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
    </p>
    </form>
    <div>
    <style>
      body{
        font-size: 12px; font-family: "微软雅黑"；/*全局控制*/
      }
      body,form,input,h1,p{
        padding: 0; margin: 0; border: 0;/*重置浏览器*/
      }
      .bg{
        width: 1431px;
        height: 717px;
        background: url(E:\\张峰华\\网页设计\\1.jpg)no-repeat;/*添加背景图片*/
        position: relative;/*设置相对定位*/
      }
      form{
        width: 600px;
        height: 400px;
        margin: 50px auto;/*使表单在浏览器中居中*/
        padding-left: 30px;/*使边框和内容之间拉开距离*/
        position: absolute;/*设置绝对定位*/
        left: 48%;
        top: 10%;
      }
      h2{
        text-align:center;
        margin: 16px 0;
      }
      p{margin-top: 20px;}
      p span{
        width: 75px;
        display: inline-block;
        text-align: right;
        padding-right: 10px;
      }
      p input{
        width: 200px;
        height: 18px;
        border: 1px solid #38a1bf;
        padding: 2px;
      }
      .lucky input{
        width: 100px;
        height: 24px;
      }
      .btn input{
        width: 100px;
        height: 30px;
        background: #93b518
        margin-top: 20px;
        margin-left: 75px;
        border-radius:3px;
        font-size:18px;
        font-family:"微软雅黑"；
        color:#fff;
      }
    </style>
</body>
</html>